<!--采购协同-->
<template>
  <el-dialog
    title="合同详情"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
    v-dialogDrag
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form ref="ruleForm" label-width="80px" class="m-detailsFrom">
      <el-form-item label="合同编号:">
        <el-input v-model.trim="detailsForm.contractNo" disabled></el-input>
      </el-form-item>
      <el-form-item label="合同名称:">
        <el-input v-model.trim="detailsForm.contractName" disabled></el-input>
      </el-form-item>
      <el-form-item label="公司:">
        <el-input v-model.trim="detailsForm.companyName" disabled></el-input>
      </el-form-item>
      <el-form-item label="供应商:">
        <el-input v-model.trim="detailsForm.supplierName" disabled></el-input>
      </el-form-item>
      <el-form-item label="有效时间:">
        <el-input v-model.trim="valitDate" disabled></el-input>
      </el-form-item>
      <div class="line-item">
        <label>附件名称:</label>
        <a
          href="#"
          @click="downloadFile"
          v-if="detailsForm.attachmentName"
        >{{detailsForm.attachmentName}}</a>
        <a href="#" v-else style="text-decoration:none; cursor:default">未上传附件</a>
      </div>
      <el-form-item label="备注信息:">
        <el-input
          type="textarea"
          maxlength="200"
          v-model.trim="detailsForm.remark"
          placeholder="暂无备注"
          disabled
        ></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer"></span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      valitDate: ''
    };
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    detailsForm: {
      type: Object
    }
  },
  methods: {
    handleClose () {
      this.$emit('closeDialog')
    },
    downloadFile () {
      const { attachmentName, url } = this.detailsForm
      let file = {
        name: attachmentName,
        url
      }
      this.$emit('downlaodFile', file)
    }
  },
  components: {},
  beforeMount () {
    console.log(this.detailsForm)
    const { startDate, endDate } = this.detailsForm
    let start = new Date(startDate).Format('yyyy-MM-dd')
    let end = new Date(endDate).Format('yyyy-MM-dd')
    this.valitDate = `${start} ~ ${end}`
  }
}
</script>
<style lang="less" scoped>
.m-detailsFrom {
  /deep/ .el-form-item {
    margin-bottom: 10px;
    .el-form-item__content {
      .el-textarea.is-disabled {
        .el-textarea__inner {
          color: #333;
        }
      }
    }
  }
  .line-item {
    margin-bottom: 10px;
    label {
      width: 80px;
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #606266;
      line-height: 30px;
      padding: 0 12px 0 0;
      box-sizing: border-box;
    }
    a {
      line-height: 30px;
      color: #409eff;
    }
  }
}
</style>
